/* BACKGROUND IMAGE OF WEBSITE */
body {
    background-image: url("../IMAGES/home-background-image.webp");
}

.border {
    border: solid;
}

#UpdateCartForm {
    display: block;
}

/* NAV BAR CONTAINERS CONTAINER */
#logoHeader {
    margin-top: 0;
    width: 25%;
}

#contentHeader {
    margin-top: 0;
    width: 70%;
    margin-left: auto;
}

/* NAV BAR CONTAINER */
table {
    overflow-x: hidden;
    width: 100%;
    height: 9.95vw;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Heritage", "Garamond", serif;
    z-index: 10;
}

/* EACH OPTION IN THE NAV BAR TABLE */
th {
    font-family: "Heritage", "Garamond", serif;
    font-size: larger;
    text-align: center;
}

/* HOME IMAGE ON NAV BAR */
#LogoHome {
    width: 9.01vw;
    height: 9.01vw;
}

/* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
.topBar {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Heritage", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* CURRENT PAGE ON NAVBAR HIGHLIGHTED */
#currentpage {
    color: rgb(251, 95, 181);
}

/* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
.topBar:hover, #currentpage:hover {
    background-color: rgba(167, 167, 167, 0.8);
    color: rgb(254, 21, 161);
    font-size: 2.5rem;
}

/* TITLE "SHOP" */
#Title {
    font-size: 4.53vw;
    font-family: "Playfair", "Garamond", serif;
    text-align: center;
}

/* INDIVIDUAL ITEM (WHEN CLICKED) CONTAINER */
#IndividualItemContainer {
    display: none;
    position: fixed;
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    right: 0;
    bottom: 0;
    z-index: 4;
}

/* INDIVIDUAL ITEM (WHEN CLICKED) */
#IndividualItem {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 0px 7px black;
    position: absolute;
    display: flex;
    text-align: center;
    color: #333333;
    z-index: 4;
    overflow-y: hidden;
}

/* SMALL DISPLAY IMAGES TO CLICK ON CONTAINER */
#MiniImageDisplay {
    height: 90%;
    width: 10%;
    margin-top: 2.5%;
    margin-left: 2%;
    z-index: 5;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}

/* SMALL DISPLAY IMAGES TO CLICK ON */
.MiniImages {
    height: 4.8vw;
    width: 4.8vw;
    object-fit: cover;
    border-radius: 5px;
}

/* MAIN IMAGE TO LOOK AT CONTAINER */
#ItemImageDisplay {
    height: 90%;
    width: 48%;
    margin-top: 2.5%;
    margin-left: 2%;
    z-index: 5;
}

.LayoverDescription {
    display: none;
    height: 29.7vw;
    width: 29.7vw;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    text-align: left;
    font-weight: bolder;
    font-size: 1.5vw;
    overflow-y: scroll;
    font-family: "Quicksand", "Garamond", serif;
    box-shadow: 0px 0px 5px black;
}

/* MAIN IMAGE TO LOOK AT CONTAINER */
.MainItemImage {
    height: 29.7vw;
    width: 29.7vw;
    object-fit: contain;
}

/* ITEM LOGISTICS (CONTAINER) */
#ItemLogistics {
    height: 90%;
    width: 33%;
    margin-top: 2.5%;
    margin-left: 2%;
    z-index: 5;
}

/* ITEM LOGISTICS */
#FocusItemInventory {
    color: rgb(177, 0, 0);
    font-size: 1.3vw;
    font-family: "Quicksand", "Garamond", serif;
}

#FocusItemPrice {
    font-weight: bold;
    font-size: 2.08vw;
    font-family: "Quicksand", "Garamond", serif;
}

#FocusItemTitle {
    font-size: 1.82vw;
    font-family: "Playfair", "Garamond", serif;
}

#FocusItemPolicies {
    font-family: "Quicksand", "Garamond", serif;
}

#FocusBuyNow {
    width: 95%;
    height: 3.26vw;
    border-radius: 6px;
    font-family: "Heritage", "Garamond", serif;
    cursor: pointer;
}

#FocusAddToCart {
    width: 95%;
    height: 3.26vw;
    border-radius: 6px;
    font-family: "Heritage", "Garamond", serif;
    cursor: pointer;
}

#ItemQuantityContainer {
    display: none;
    border-style: solid;
    width: 95%;
    border-radius: 50vw;
    margin-left: auto;
    margin-right: auto;
}

.ItemQuantityButtons {
    width: 4vw;
    height: 4vw;
    font-family: "Quicksand", "Garamond", serif;
    font-size: 2.5vw;
    border-radius: 50vw;
    margin-top: auto;
    margin-bottom: auto;
    border: none;
    background-color: transparent;
}

.ItemQuantityButtons:hover {
    background-color: rgb(225, 225, 225);
    cursor: pointer;
}

.ItemQuantity {
    font-family: "Quicksand", "Garamond", serif;
    font-size: 2.5vw;
    height: 4vw;
    text-align: center;
    margin: auto;
    padding-left: 2.3vw;
    padding-top: .3vw;
}

.Add {
    margin-left: auto;
}

#FocusItemDescription {
    width: 95%;
    height: 10%;
    border-radius: 6px;
    font-family: "Heritage", "Garamond", serif;
    cursor: pointer;
}

/* PRODUCTS CONTAINER */
#ProductsContainer {
    overflow-x: hidden;
    display: flex;
    width: 100%;
}

/* SORTING OPTIONS CONTAINER */
#SortingContainer {
    width: 25%;
}

/* SEARCH ITEMS TEXT AREA */
#SearchFilter {
    display: inline-flex;
    border: 0.1rem solid;
    border-color: #ffcdf6;
    border-radius: 3.26vw;
    background-color: #ffcdf6;
    width: 20rem;
    height: 5rem;
}

#SearchTextID:focus {
    outline: 0 solid transparent;
}

/* SEARCH ITEM TEXT PLACEHOLDER STYLING */
.SearchText {
    position: relative;
    display: inline;
    padding-left: 1.3vw;
    color: gray;
    font-family: "Quicksand", "Garamond", serif;
    font-size: 1.56vw;
}

/* SEARCH ITEM TEXT STYLING */
.SearchTextEdited {
    position: relative;
    display: inline;
    padding-left: 1.3vw;
    color: black;
    font-family: "Playfair", "Garamond", serif;
    font-size: 1.56vw;
    text-overflow: ellipsis;
}

/* DROPDOWN CONTAINER */
#SortByDropdownContainer {
    width: 80%;
    margin-right: auto;
    border: 3px solid;
    border-color: #000000;
    border-radius: 3.26vw;
    background-color: #ffcdf6;
}

/* DROPDOWN TEXT */
#SortByDropdown {
    text-align: center;
    font-family: "Playfair", "Garamond", serif;
}

/* DROPDOWN OPTIONS CONTAINER */
#SortByDropdownOptions {
    display: none;
}

/* DROPDOWN OPTIONS TEXT */
.DropdownOptions {
    padding-left: 1.63vw;
    font-size: 1.3vw;
    font-family: "Heritage", "Garamond", serif;
}

.DropdownOptions:hover {
    color: rgb(162, 13, 155);
    cursor: pointer;
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
}

/* LISTED ITEMS CONTAINER */
#ListedItemsContainer {
    width: 80%;
    margin-left: auto;
    padding-right: 0.33vw;
}

/* LISTED ITEM ROW */
.Row {
    display: inline-flex;
    width: 100%;
    padding: 0.46vw 0 0.46vw;
}

/* SORTED ITEM ROW */
.RowSorted {
    display: inline-flex;
    width: 100%;
    padding: 0.46vw 0 0.46vw;
}

/* LISTED ITEMS */
.Item {
    position: relative;
    display: inline;
    padding: 0.33vw 0 0 0.98vw;
    height: 27.15vw;
    width: 100%;
}

.Item:hover {
    border-radius: 7px;
    border-color: white;
    box-shadow: 0px 0px 7px black;
    cursor: pointer;
}

#EmptyItemContainer:hover {
    border-radius: 0px;
    border-color: white;
    box-shadow: 0px 0px 0px black;
    cursor: default;
}

/* LISTED ITEM IMAGE */
.ItemImage {
    height: 70%;
    width: 95%;
    object-fit: cover;
}

/* LISTED ITEM TITLE */
.ItemTitle {
    position: relative;
    display: inline;
    font-size: 1.04vw;
    font-family: "Playfair", "Garamond", serif;
}

/* LISTED ITEM PRICE */
.ItemPrice {
    position: relative;
    display: inline;
    font-size: 1.56vw;
    font-weight: bold;
    font-family: "Quicksand", "Garamond", serif;
}

/* LISTED ITEM SHIPPING */
.ItemShipping {
    position: relative;
    display: inline;
    font-size: 1.04vw;
    font-family: "Quicksand", "Garamond", serif;
    padding: 0.13vw 0.33vw 0.2vw 0.33vw;
    background-color: rgb(156, 211, 156);
    border-radius: 10px;
    border-color: rgb(0, 0, 0);
}

/* LISTED ITEM ALERT */
.ItemAlert {
    position: relative;
    display: inline;
    font-size: 1.04vw;
    font-family: "Quicksand", "Garamond", serif;
    color: rgb(177, 0, 0);
}

/* REFERENCE SECTION CONTAINER */
#ReferenceSectionContainer {
    overflow-x: hidden;
    display: flex;
    width: 100%;
}

/* PAYMENT SECTION CONTAINER */
#PaymentContainer {
    width: 50%;
    align-items: center;
    justify-content: center;
}

/* SOCIAL MEDIA SECTION CONTAINER */
#SocialMediaContainer {
    width: 50%;
}

/* REFERENCE TITLES */
.ReferenceTitle {
    font-family: "Heritage", "Garamond", serif;
    text-align: center;
    font-size: 2vw;
}

/* REFERENCE LOGOS CONTAINERS */
.ReferenceLogosContainer {
    width: 100%;
}

/* REFERENCE LOGOS */
.ReferenceImage {
    width: 10vw;
    object-fit: cover;
}

#StripeLogo {
    margin-left: 20vw;
}

/* ANIMATION REFERENCES */
.grow:hover {
    animation-name: grow;
    animation-duration: 0.5s;
}

.shrink {
    animation-name: shrink;
    animation-duration: 0.5s;
}

.growcurrent:hover {
    animation-name: growcurrent;
    animation-duration: 0.5s;
}

.shrinkcurrent {
    animation-name: shrinkcurrent;
    animation-duration: 0.5s;
}

.itemhover:hover {
    animation-name: itemhover;
    animation-duration: 0.5s;
}

.fade {
    animation-name: fade;
    animation-duration: 0.3s;
}

.expandfromtop {
    animation-name: expandfromtop;
    animation-duration: 0.3s;
}

/* ANIMATIONS */
@keyframes grow {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrink {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes growcurrent {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrinkcurrent {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes itemhover {
    0% {border-radius: 0px;
        border-color: white;
        box-shadow: 0px 0px 0px black;}
    100% {border-radius: 7px;
        border-color: white;
        box-shadow: 0px 0px 7px black;}
}

@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes expandfromtop {
    0% {scale: 0;
    height: 0;}
    100% {scale: 1;
    height: 29.7vw;}
}

/* IMPORTED FONTS */
@font-face {
    font-family: Quicksand;
    src: url("Quicksand-Regular.ttf");
}

@font-face {
    font-family: Heritage;
    src: url("ModernHeritageDisplay.otf");
}

@font-face {
    font-family: Playfair;
    src: url("PlayfairDisplay.ttf");
}

/*////////////////////////////////////////////////////////////
/////////////////////// MOBILE PORTING ///////////////////////
///////////////////////////////////////////////////////////*/


@media screen and (max-width: 1300px) {
    #Title {
        font-size: 10vw;
    }

    #ProductsContainer {
        display: block;
    }

    #SortingContainer {
        width: 90%;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    #SearchFilter {
        width: 50vw;
        height: 10vw;
    }

    .SearchText {
        font-size: 3vw;
    }

    .SearchTextEdited {
        font-size: 3vw;
    }

    #SortByDropdownContainer {
        width: 25vw;
        margin-left: auto;
    }

    #SortByDropdown {
        font-size: 3vw;
    }

    .DropdownOptions {
        font-size: 3vw;
    }

    #IndividualItem {
        display: block;
        overflow-y: scroll;
    }

    #MiniImageDisplay {
        display: none;
    }

    #ItemImageDisplay {
        width: 95%;
        height: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .LayoverDescription {
        height: 50%;
        width: 95%;
        font-size: 4vw;
    }

    .MainItemImage {
        height: 100%;
        width: 100%;
    }

    #ItemLogistics {
        height: 48%;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    #FocusItemInventory {
        font-size: 4vw;
    }

    #FocusItemPrice {
        font-size: 4vw;
    }

    #FocusItemTitle {
        font-size: 4vw;
    }

    #FocusItemPolicies {
        font-size: 3vw;
    }

    #BuyNowForm {
        width: 30%;
        height: 8vh;
    }

    #FocusBuyNow {
        width: 100%;
        height: 100%;
        font-size: 3.5vw;
        margin-right: auto;
    }

    #FocusAddToCart {
        width: 35%;
        height: 8vh;
        margin-left: auto;
        font-size: 3.5vw;
    }

    #ItemQuantityContainer {
        display: none;
        border-style: solid;
        width: 16vw;
        height: 8vh;
        border-radius: 50vw;
        margin-left: auto;
        margin-right: auto;
    }

    .ItemQuantityButtons:hover {
        background-color: rgb(225, 225, 225);
        cursor: pointer;
    }

    .ItemQuantity {
        font-size: 2.5vw;
        height: 4vw;
        text-align: center;
        margin: auto;
    }

    .Add {
        margin-left: auto;
    }

    #FocusItemDescription {
        width: 30%;
        height: 8vh;
        margin-left: auto;
        font-size: 2vw;
    }

    #ListedItemsContainer {
        padding-top: 5vw;
        margin-right: auto;
    }

    .Row {
        height: 60vw;
    }

    /* SORTED ITEM ROW */
    .RowSorted {
        height: 60vw;
    }

    .ItemImage {
        height: 100%;
        width: 90%;
    }

    .ItemTitle {
        font-size: 3vw;
    }

    .ItemPrice {
        font-size: 4vw;
    }

    .ItemShipping {
        font-size: 3vw;
    }

    .ItemAlert {
        font-size: 3vw;
    }

    .ReferenceTitle {
        font-size: 3vw;
    }

    @keyframes expandfromtop {
        0% {scale: 0;
        height: 0;}
        100% {scale: 1;
        height: 50%;}
    }
}

@media screen and (max-width: 750px) {
    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2vw;
    }

    /* ANIMATIONS */
    @keyframes grow {
        0% {background-color: rgb(213, 213, 213);
            color: rgb(0, 0, 0);}
        100% {background-color: rgba(167, 167, 167, 0.8);
            color: rgb(254, 21, 161);}
    }

    @keyframes shrink {
        0% {background-color: rgba(167, 167, 167, 0.8);
            color: rgb(254, 21, 161);}
        100% {background-color: rgb(213, 213, 213);
            color: rgb(0, 0, 0);}
    }
}

@media screen and (max-width: 550px) {
    .ReferenceTitle {
        font-size: 4vw;
    }

    .ItemQuantityButtons {
        width: 50%;
        height: 64.94%;
        font-size: 5vw;
    }

    .ItemQuantity {
        font-size: 5vw;
        height: 8vw;
        margin: none;
        padding-left: 0;
        padding-top: 0;
    }

    #FocusItemDescription {
        font-size: 3vw;
    }
}

@media screen and (max-width: 400px) {
    /* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
    .topBar {
        background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        border-color: rgba(167, 167, 167, 0.8);
        font-size: 2.5vw;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5vw;
    }

    .ItemQuantityButtons {
        width: 62.5%;
        height: 60.88%;
        font-size: 6vw;
    }

    .ItemQuantity {
        font-size: 5vw;
        height: 10vw;
        padding-top: 3vw;
    }
}

@media screen and (max-width: 300px) {
    /* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
    .topBar {
        background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        border-color: rgba(167, 167, 167, 0.8);
        font-size: 2vw;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2vw;
    }
}